<template>
  <div>
    <div class="title">收益</div>
    <div class="tou1">
      <!-- title-active-color="red" 标签字体颜色 -->
      <van-tabs v-model="active" title-active-color="rgb(191, 115, 255)">
        <!-- 分页1 -->
        <van-tab
          title="全部"
          style="color: rgb(191, 115, 255); margin-top: 1em; padding: 0 2em"
        >
          <!-- 卡片 -->
          <div class="card" v-for="order in shouyi1" :key="order.id">
            <div class="card_left">
              <img :src="order.customer.userFace" alt="" />
            </div>
            <div class="card_right">
              <span class="customer">{{ order.customer.username }}</span>
              <span class="status">{{ order.status }}</span>
              <div class="right_mid">
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </div>
              <div class="right_foot">
                <span class="time">{{ order.orderTime | fmtDate_global }}</span>
                <span class="price"> ¥{{ order.total }} </span>
              </div>
            </div>
          </div>
        </van-tab>
        <!-- 分页2 -->
        <van-tab title="提现" style="color: rgb(191, 115, 255)">
          <div class="cash" v-for="apply in applyData" :key="apply.id">
            <div class="cash_top">
              <span>提现-到银行卡</span>
              <span>¥{{ apply.money }}</span>
            </div>
            <div class="cash_time">{{ apply.applyTime | fmtDate_global }}</div>
            <div class="cash_status">{{ apply.status }}</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 垫底盒子 -->
    <div style="height: 65px"></div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      status: "已完成",
      page: 1,
      pageSize: 10,
      active: 1,
      shouyi1: [],
      applyData: [],
    };
  },
  computed:{
    ...mapState('user',['userInfo'])
  },
  methods: {
    // 获取接口参数
    async shouyi() {
      
      let a = {
        page: this.page,
        pageSize: this.pageSize,
        status: this.status,
        employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", a);
      this.shouyi1 = res.data.data.list;
      
    },
    //获取提现申请数据
    async getApplyData() {
      let token = localStorage.getItem('token')
      let userData = await get('/user/info',{token})
      let userId = userData.data.data.id
      let data = {
        page: 1,
        pageSize: 1000,
        userId:this.userInfo.id
      }
      let res = await get("/accountApply/pageQueryAccountApply", data);
      this.applyData = res.data.data.list;
      
    },
    //获取
  },
  created() {
    this.shouyi();
    this.getApplyData();
  },
};
</script>

<style scoped lang="scss">
.title {
  width: 100%;
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.4em;
}
.card {
  width: 93%;
  height: 87px;
  margin: 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  .card_left {
    height: 80px;
    width: 80px;

    img {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }
  .card_right {
    margin-left: 1em;
    flex: 2;
    height: 80px;
    .customer {
      color: #222;
    }
    .status {
      float: right;
      font-size: 11px;
      color: #f8825d;
    }
    .right_mid {
      font-size: 12px;
      margin-top: 1em;
      color: #666;
    }
    .right_foot {
      margin-top: 1em;
      font-size: 12px;
      color: #222;
      .price {
        float: right;
      }
    }
  }
}
.cash {
  width: 80%;
  height: 68px;
  margin: 0 auto;
  margin-top: 1em;
  border-radius: 5px;
  padding: 0.5em 1em;
  color: #999;
  box-shadow: 0 0 10px #ccc;
  .cash_top {
    span:first-child {
      color: #333;
      font-weight: 300;
    }
    span:last-child {
      float: right;
      color: #333;
    }
  }
  .cash_time {
    margin-top: 2em;
    font-size: 11px;
    float: left;
  }
  .cash_status {
    float: right;
    font-size: 11px;
    margin-top: 2em;
    color: #f8825d;
  }
}
</style>